<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>饿了么账单计算11</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
	<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.all.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
	<style>
		td,.layui-table th{text-align: center;}
		.layui-col-xs2 .layui-input-inline{width: 119px;}
        .layui-col-xs2 input.layui-input{text-align: center;padding-left:0;}
        td{position: relative;}
        .remove{position: absolute;right: 10px;top: 0;bottom:0;margin:auto;border-radius: 22px;width: 22px;height: 22px;background: red;color: #ffffff;cursor: pointer;display: none;}
        .remove1{position: absolute;right: 15px;top: 10px;margin:auto;border-radius: 18px;width: 18px;line-height: 18px;height: 18px;color: #ffffff;cursor: pointer;display: none;}
        tr:hover .remove{display: block;}
        tr:hover .remove1{display: block;}
        [v-clok]{display: none;}
	</style>
	<div class="layui-main" id="box">
		<div class="layui-row">
	        <table v-clok class="layui-table">
				<colgroup>
					<col width="150">
					<col width="150">
					<col width="150">
					<col>
				</colgroup>
				<thead>
					<tr>
						<td colspan="100%">
							<div class="layui-row">
								<div class="layui-col-xs2">实际支付</div>
								<div class="layui-col-xs2">红包费</div>
								<div class="layui-col-xs2">满减费用</div>
								<div class="layui-col-xs2">运费</div>
								<div class="layui-col-xs2">人数</div>
								<div class="layui-col-xs2">总价</div></div>
						</td>
					</tr>
					<tr>
						<td colspan="100%">
							<div class="layui-row">
								<div class="layui-col-xs2">
									<div class="layui-input-inline">
										<input type="text" v-model="payPrice" class="layui-input">
									</div>
								</div>
								<div class="layui-col-xs2">
									<div class="layui-input-inline">
										<input type="text" v-model="envelopes" class="layui-input">
									</div>
								</div>
								<div class="layui-col-xs2">
									<div class="layui-input-inline">
										<input type="text" v-model="reduction" class="layui-input">
									</div>
								</div>
								<div class="layui-col-xs2">
									<div class="layui-input-inline">
										<input type="text" v-model="freight" class="layui-input">
									</div>
								</div>
								<div class="layui-col-xs2">
									<div class="layui-input-inline">
										<input type="text" v-model="people" class="layui-input layui-bg-gray" readonly="readonly">
									</div>
								</div>
								<div class="layui-col-xs2">
									<div class="layui-input-inline">
										<input type="text" v-model="allPrice" class="layui-input layui-bg-gray" readonly="readonly">
									</div>
								</div>
							</div>
						</td>
					</tr>
					<tr>
						<th>NAME</th>
						<th>食物价格</th>
						<th>包装费</th>
						<th>算法： 价格 - 价格/总价*优惠价格</th>
						<th>需支付</th></tr>
				</thead>
				<tbody>
					<tr v-for="(x,index) in list">
						<td>
							<div class="layui-input-inline">
								<input type="text" v-model="x.name" class="layui-input">
							</div>
							<div class="remove1" @click="delOne(index)" @contextmenu.prevent="addOne(index+1)">
								<svg t="1608606177047" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2443" width="18" height="18">
									<path d="M86.478452 0h841.88215c41.598624 0 75.533763 33.924129 75.533764 75.522753v863.782537c0 41.609634-33.93514 75.533763-75.533764 75.533764H86.478452c-41.598624 0-75.522753-33.924129-75.522753-75.533764V75.522753C10.955699 33.924129 44.879828 0 86.478452 0z m425.972989 668.044387a5.042925 5.042925 0 0 0-5.042925 5.031914v115.877161c0 2.78572 2.268215 5.042925 5.042925 5.042925H867.427097a5.042925 5.042925 0 0 0 5.031914-5.042925V673.076301a5.042925 5.042925 0 0 0-5.031914-5.031914H512.451441zM62.430968 48.590452a5.042925 5.042925 0 0 0-5.031914 5.042924v871.996559c0 48.513376-4.525419 47.500387 29.673978 12.607312l797.057377-813.199139c79.750882-81.358452 96.509247-76.447656-23.133592-76.447656H62.430968z" fill="#009688" p-id="2444"></path>
									<path d="M108.808258 227.570237h126.172215a5.053935 5.053935 0 0 0 5.042925-5.053936V96.344086c0-3.027957 2.257204-5.494366 5.031914-5.494366H360.932473c2.77471 0 5.031914 2.466409 5.031914 5.494366v126.172215c0 2.78572 2.257204 5.053935 5.042925 5.053936h126.172215c3.038968 0 5.505376 2.257204 5.505376 5.020903v115.877161c0 2.77471-2.466409 5.042925-5.505376 5.042925H371.007312a5.042925 5.042925 0 0 0-5.042925 5.031914v126.183226c0 3.027957-2.257204 5.505376-5.031914 5.505376H245.055312c-2.77471 0-5.031914-2.477419-5.031914-5.505376v-126.183226a5.053935 5.053935 0 0 0-5.042925-5.031914H108.808258c-3.027957 0-5.505376-2.257204-5.505376-5.042925V232.59114c0-2.77471 2.477419-5.020903 5.505376-5.020903z" fill="#009688" p-id="2445"></path>
								</svg>
							</div>
						</td>
						<td>
							<div class="layui-input-inline">
								<input type="text" v-model="x.oldPrice" class="layui-input">
							</div>
						</td>
						<td>
							<div class="layui-input-inline">
								<input type="text" v-model="x.packing" class="layui-input">
							</div>
						</td>
						<td>({{parseFloat(x.oldPrice)}} + {{parseFloat(x.packing)}} + {{parseFloat(freight)}} / {{parseFloat(people)}}) - ({{parseFloat(x.oldPrice)}} + {{parseFloat(x.packing)}} + {{parseFloat(freight)}} / {{parseFloat(people)}}) / ({{parseFloat(envelopes)}} + {{parseFloat(reduction)}} + {{parseFloat(payPrice)}}) * ({{parseFloat(envelopes)}} + {{parseFloat(reduction)}})</td>
						<td>
							{{ x.toPrice || 0 }}
							<!-- <div class="remove" @click="delOne(index)">—</div> -->
						</td>
					</tr>
					<tr>
						<td colspan="4" style="text-align: left;">
							<button class="layui-btn" @click="addOne(list.length)">+</button>
							<button class="layui-btn" @click="delOne(list.length-1)">-</button>
						</td>
						<td :p="people">总计:{{ parseInt(totalPrice*100)/100 || 0 }}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

	<script>
		layui.define(['jquery', 'layer'], function(exports){
			var $ = layui.$,
			layer = layui.layer;
		});
		var app3 = new Vue({
		    el: '#box',
		    data: function(){
		    	return {
					payPrice:0,   //实际支付
					envelopes:0,   //红包费
					reduction:0,   //满减费用
					freight:0,     //运费
					// people:6,      //人数 改成计算属性了
					totalPrice:0,  //总计
					list:[
						{name:'发起人',oldPrice:0,packing:0,toPrice:0,many:0},
						{name:'1',oldPrice:0,packing:0,toPrice:0,many:0},
						{name:'1',oldPrice:0,packing:0,toPrice:0,many:0},
						{name:'1',oldPrice:0,packing:0,toPrice:0,many:0},
						{name:'1',oldPrice:0,packing:0,toPrice:0,many:0},
					]
				}
		    },
		    watch: {

			},
            methods: {
            	addOne:function(k){
            		this.list.splice(k,0,{name:'',oldPrice:0,packing:0,toPrice:0,many:0});
            	},
                delOne:function(k){
                    this.list.splice(k,1);
                }
			},
			computed: {
			    allPrice:function () { //总价
			      return parseInt((parseFloat(this.envelopes)+parseFloat(this.reduction)+parseFloat(this.payPrice))*100)/100;
			    },
			    people:function(){
			    	if (this.list.length>0) {
			    		this.totalPrice=0;
			    		for (i in this.list) {
			    			this.list[i].toPrice=(parseInt(((parseFloat(this.list[i].oldPrice) + parseFloat(this.list[i].packing) + parseFloat(this.freight) / parseFloat(this.list.length)) - (parseFloat(this.list[i].oldPrice) + parseFloat(this.list[i].packing) + parseFloat(this.freight) / parseFloat(this.list.length)) / (parseFloat(this.envelopes) + parseFloat(this.reduction) + parseFloat(this.payPrice)) * (parseFloat(this.envelopes) + parseFloat(this.reduction))) * 100) / 100);
			    			this.totalPrice=parseFloat(this.totalPrice)+parseFloat(this.list[i].toPrice);
			    		}
			    	}
		    		return this.list.length;
			    }
			}
		})
	</script>
</body>
</html>